<!-- 我的楼宇 -->
<template>
  <div>
    <ContainerTitle text="我的楼宇" class="title">
      <template>
        <Buttons :buttons="sendBtn" @goRelease="goRelease"></Buttons>
      </template>
    </ContainerTitle>
    <div class="msgDiv" v-if="total != 0">
      <el-table
        :data="tableData"
        style="width: 100%"
        min-height="400"
        :border="true"
        :header-cell-style="{ background: '#F4F4F4', color: '#045DB9' }"
      >
        <el-table-column type="index" label="序号" width="70">
          <template slot-scope="scope">
            <div>{{((currentPage - 1) * pageSize) + (scope.$index + 1)}}</div>
          </template>
        </el-table-column>

        <el-table-column prop="buildingName" label="楼宇名称" show-overflow-tooltip width="150">
        </el-table-column>

        <el-table-column label="所属街道" width="120">
          <template slot-scope="scope">
            <span>
              {{ $selectDict(Street, scope.row.streetCode).dictLabel }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="address" label="详细位置" show-overflow-tooltip width="160">
        </el-table-column>

        <el-table-column prop="contactsPerson" label="联系人" show-overflow-tooltip width="100">
        </el-table-column>

        <el-table-column prop="contactsPhone" label="联系方式" show-overflow-tooltip width="110">
        </el-table-column>

        <el-table-column label="状态" width="80">
          <template slot-scope="scope">
            <span
              :style="'color: ' + formatApplyStatus(scope.row.state).color"
              >{{ formatApplyStatus(scope.row.state).label }}</span
            >
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="210">
          <template slot-scope="scope">
            <span class="rowBtn" @click="goDetail(scope.row)">详情</span>
            <span
              v-if="scope.row.state == '0' || scope.row.state == '2'"
              @click="toBuilding(scope.row.id)"
              class="rowBtn"
              >编辑</span
            >
            <span
              v-if="scope.row.state == '0'"
              @click="publish(scope.row)"
              class="rowBtn"
              >发布</span
            >
            <span
              v-if="scope.row.state != '0'"
              class="rowBtn"
              @click="goLikeCompany(scope.row)"
              >意向企业</span
            >
            <span
              v-if="scope.row.state == '1'"
              class="rowBtn"
              @click="open(scope.row)"
              >下架</span
            >
            <span
              v-if="scope.row.state == '2'"
              class="rowBtn"
              @click="shelves(scope.row)"
              >上架</span
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20, 25, 30]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <div class="msgDivBox" v-if="total == 0">
      <div>您还未发布过楼宇，请编辑发布您的楼宇信息吧!</div>
      <Buttons :buttons="sendBtn2" @goRelease="goRelease" class="btns"></Buttons>
    </div>
  </div>
</template>

<script>
import config from "@/utils/config";
import { request } from "@/utils/request";
import { getMyBuildings, getUserAuthInfo ,ifUp } from '@/common/api/company.js'
export default {
  data() {
    //这里存放数据
    return {
      sendBtn:[{ text: "发布新楼宇", type: "success", size: "l", method: "goRelease" }],
      sendBtn2:[{ text: "发布楼宇", type: "success", size: "l", method: "goRelease" }],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      crumbs: [
        {
          label: "企业空间",
          value: "company",
        },
        {
          label: "招商中心",
          value: "investment",
        },
        {
          label: "我的楼宇",
          value: "myBuilding",
          choose: true,
        },
      ],
      State: {},
      Street: [],
      tableData: [],
      Info: "",
      applyStatusList: [
        { value: 0, label: "待发布" },
        { value: 1, label: "已上架" },
        { value: 2, label: "已下架" },
      ]
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 跳转到编辑楼宇
    toBuilding(id) {
      this.$router.push({ name: "releaseBuilding", query: { id: id } });
    },
    // 下架弹框
    open(row) {
      // this.$confirm("确认要下架这条楼宇信息?", "提示", {
      //   confirmButtonText: "确认",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
      //     this.ifUp(row, 2, 2);
      //   })
      //   .catch(() => {
      //     this.$message({
      //       type: "info",
      //       message: "已取消下架",
      //     });
      //   });
      const h = this.$createElement;
        this.$msgbox({
          message: h('p', {style:"padding:40px 30px 20px 40px"},[
            h('i',{class:"el-icon-warning",style:"color: #E6A23C;font-size: 24px!important;vertical-align:bottom;margin-right:30px"},''),
            h('span', {style:"vertical-align:middle;"}, "确认要下架这条楼宇信息？"),
            h('p',{},[
              h('span',{style:"font-size:12px;color:#808080;margin-left:54px;"},'下架后将不会在招商中心展示，企业客户无法申请入驻。')
            ])
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              this.ifUp(row, 2, 2);
              done();
            } else {
              this.$message({
                type: "info",
                message: "已取消下架",
              });
              done();
            }
          }
        })
    },
    // 上架弹框
    shelves(row) {
      // this.$confirm("确认要上架这条楼宇信息?", "提示", {
      //   confirmButtonText: "确认",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
      //     this.ifUp(row, 1, 1);
      //   })
      //   .catch(() => {
      //     this.$message({
      //       type: "info",
      //       message: "已取消上架",
      //     });
      //   });
        const h = this.$createElement;
        this.$msgbox({
          message: h('p', {style:"padding:40px 30px 20px 40px"},[
            h('i',{class:"el-icon-warning",style:"color: #E6A23C;font-size: 24px!important;vertical-align:bottom;margin-right:30px"},''),
            h('span', {style:"vertical-align:middle;"}, "确认要上架这条楼宇信息？"),
            h('p',{},[
              h('span',{style:"font-size:12px;color:#808080;margin-left:54px;"},'上架后将会在招商中心展示，企业客户可以申请入驻。')
            ])
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              this.ifUp(row, 1, 1);
              done();
            } else {
              this.$message({
                type: "info",
                message: "已取消上架",
              });
              done();
            }
          }
        })
    },
    // 发布弹框
    publish(row) {
      // this.$confirm("确认要发布这条楼宇信息?", "提示", {
      //   confirmButtonText: "确认",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
      //     this.ifUp(row, 1, 0);
      //   })
      //   .catch(() => {
      //     this.$message({
      //       type: "info",
      //       message: "已取消发布",
      //     });
      //   });
      const h = this.$createElement;
        this.$msgbox({
          message: h('p', {style:"padding:40px 30px 20px 40px"},[
            h('i',{class:"el-icon-warning",style:"color: #E6A23C;font-size: 24px!important;vertical-align:bottom;margin-right:30px"},''),
            h('span', {style:"vertical-align:middle;"}, "确认要发布这条楼宇信息？"),
            h('p',{},[
              h('span',{style:"font-size:12px;color:#808080;margin-left:54px;"},'')
            ])
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              this.ifUp(row, 1, 0);
              done();
            } else {
              this.$message({
                type: "info",
                message: "已取消发布",
              });
              done();
            }
          }
        })
    },
    // 状态
    formatApplyStatus: function (state) {
      let ns = this;
      for (let i = 0; i < ns.applyStatusList.length; i++) {
        if (state == ns.applyStatusList[i].value) {
          return ns.applyStatusList[i];
        }
      }
      return { label: "" };
    },
    // 获取数据
    async getData() {
      let res = await getMyBuildings({ pageSize: this.pageSize, pageNum: this.currentPage });
      if (res.code == 200) {
        this.tableData = res.rows;
        this.total = res.total;
      }
    },
    // 业主楼宇认证是否通过
    async getUserAuthInfo() {
      let res = await getUserAuthInfo();
      if (res.code == 200) {
        this.Info = res.data.state;
      }
    },
    // 上架下架接口
    async ifUp(row, num, chan) {
      let res = await ifUp({ state: num, id: row.id });
      if (res.code == 200) {
        if (chan == 0) {
          this.$message({
            type: "success",
            message: "发布成功!",
          });
        } else if (chan == 1) {
          this.$message({
            type: "success",
            message: "上架成功!",
          });
        } else {
          this.$message({
            type: "success",
            message: "下架成功!",
          });
        }
        this.getData();
      } else {
        if (chan == 0) {
          this.$message.error("上架失败！");
        } else if (chan == 1) {
          this.$message.error("上架失败！");
        } else {
          this.$message.error("下架失败！");
        }
      }
    },
    // 获取字典
    async getDict() {
      // 调用公共方法中的查询字典表
      this.getDictList(this,`building_dynamic_state,street_code`).then(res => {
        this.Street = res.street_code;
        this.State = res.building_dynamic_state;
      })
    },
    goRelease() {
      this.$CheckRole('发布楼宇', async () => {
        this.$router.push({ name: "releaseBuilding"});
      });
    },
    goDetail(row) {
      console.log('row', row)
      this.$router.push({
        name: "buildingDetail",
        query: { type: 1, id: row.id,name: row.buildingName },
      });
    },
    goLikeCompany(row) {
      this.$router.push({
        name: "buildingDetail",
        query: { type: 2, id: row.id },
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getDict();
    this.getUserAuthInfo();
    this.getData();
  },
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.title{
  margin-bottom: 5px;
}
.btns{
  margin-top: 30px;
}
.breadcrumb {
  width: 1000px;
  margin: 20px 0;
}

.roomDiv {
  display: flex;
  justify-content: center;
}

.roomDiv .leftDiv {
  width: 200px;
  text-align: left;
}

.roomDiv .rightDiv {
  margin-top: 14px;
  width: 800px;
  margin-left: 30px;
}

.titleDiv {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #045db9;
  margin-bottom: 20px;
  right: 155px;
  top: 160px;
}

.titleDiv .sendBtn {
  font-weight: normal;
  color: #ffffff;
  background: #045db9;
  text-align: center;
  border-radius: 5px;
  font-size: 15px;
  display: flex;
  width: 95px;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}
.msgDivBox .sendBtn {
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    background: #045db9;
    border-radius: 3px;
    color: #ffffff;
    margin: 56px auto 0;
    cursor: pointer;
}
.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}

.msgDiv {
  margin: 40px 0;
}
.block {
  margin-top: 14px;
  text-align: right;
}
.rowBtn {
  cursor: pointer;
  margin-right: 9px;
}

.toLoginBtn {
  color: #ffffff;
  background-color: #045db9;
  padding: 10px 40px;
  display: inline-block;
  font-size: 15px;
  border-radius: 5px;
  transition: all 0.2s ease 0s;
}

.toLoginBtn:hover {
  cursor: pointer;
  box-shadow: 0px 0px 5px #eeeeee;
}

.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}

.msgDivBox {
  height: 180px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #cccccc;
  font-size: 18px;
  color: #595e64;
  padding-top: 41px;
}

.btn {
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  background: #045db9;
  border-radius: 3px;
  color: #ffffff;
  margin: 56px auto 0;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

</style>

<style scpoed>
.el-message-box{
 width: 480px !important;
}
</style>